<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { showToast } from "vant";
import { iuserLogout } from '@/service/api.ts';
import AppLogin from './appLogin.vue';
import WxLogin from './wxLogin.vue';

const route = useRoute();
const { phone, roomCode } = route?.query || {};

const loadRf = ref(false);
onMounted(async () => {
  await logout();
  if (!phone) {
    showToast('未传入手机号！');
    return;
  }
  loadRf.value = true;
});
const logout = () => {
  return new Promise((resolve, reject) => {
    iuserLogout({ method: "get" }).then(res => resolve()).catch(err => resolve());
  });
}

const roomID = ref(roomCode || null);
const url = window.location.href;
</script>

<template>
  <div class="view flex-column" style="font-size: 20px;" >
    <img class="circle" :src="require('@/assets/image/login/circle.png')" />
    <img class="stars" :src="require('@/assets/image/login/stars.png')" />
    
    <div class="hello-box">
      <p>Hello！</p>
      <p>欢迎使用生活舱</p>
    </div>
    
    <template v-if="loadRf">
      <AppLogin :phone="phone" :roomCode="roomID" v-if="phone && roomID"/>
      <WxLogin @set-roomid="(v) => roomID = v" v-else-if="phone"/>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.view {
  width: 100vw;
  height: 100vh;
  background: linear-gradient( 180deg, #CCFAD7 32%, rgba(217,250,225,0) 100%);
  position: relative;
}
img.circle {
  position: absolute;
  right: 27px;
  top: 100px;
  width: 153px;
  height: 152px;
}
img.stars {
  position: absolute;
  right: 174px;
  top: 50px;
  width: 75px;
  height: 75px;
}
.hello-box {
  position: absolute;
  left: 34px;
  top: 108px;
  p {
    margin-bottom: 2px;
    font-weight: 500;
    font-size: 20px;
    color: #007537;
    line-height: 23px;
  }
}
</style>